<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的视频原型</title>
  <style>
    /* ===== 全局重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                   "PingFang SC", "Hiragino Sans GB",
                   "Microsoft YaHei", sans-serif;
      background-color: #faf9f5;
      color: #333333;
      font-size: 14px;
      line-height: 1.4;
      height: 100%;
    }

    /* ===== 页面容器 ===== */
    .container {
      max-width: 480px;
      margin: 0 auto;
      background-color: #ffffff;
      min-height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ===== 顶部导航栏 ===== */
    .topNavBar {
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      padding: 12px 16px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .navLeft {
      width: 40px;
    }

    .backButton {
      font-size: 24px;
      color: #333333;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    .navCenter {
      flex: 1;
      text-align: center;
    }

    .pageTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }

    .iconButton {
      font-size: 20px;
      color: #333333;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    /* ===== 搜索区域 ===== */
    .searchSection {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .searchBox {
      background-color: #ffffff;
      border: 2px solid #e0e0e0;
      border-radius: 20px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .searchInput {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 14px;
      color: #333333;
      outline: none;
    }

    .searchInput::placeholder {
      color: #999999;
    }

    .searchBtn {
      background: transparent;
      border: none;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      white-space: nowrap;
      color: #333333;
    }

    /* ===== 筛选栏 ===== */
    .filterSection {
      padding: 0 16px 16px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .filterItem {
      background-color: transparent;
      border: none;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 13px;
      color: #666666;
      padding: 0 8px;
      gap: 4px;
    }

    /* 第一个筛选项的右侧分隔线 */
    .filterItem:first-child {
      padding-right: 16px;
    }

    .filterText {
      font-size: 13px;
      color: #666666;
    }

    .filterArrow {
      font-size: 12px;
      color: #999999;
    }

    /* ===== 视频网格容器 ===== */
    .videoGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 6px;
      flex: 1;
      overflow-y: auto;
      align-content: start;
    }

    /* ===== 视频卡片 ===== */
    .videoCard {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      height: fit-content;
    }

    .videoCard:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    /* 视频缩略图 */
    .videoThumbnail {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background-color: #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 12px;
      overflow: hidden;
    }

    /* 十字交叉线 */
    .videoThumbnail::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 1px;
      background: linear-gradient(to right, transparent, #cccccc, transparent);
      z-index: 1;
    }

    .videoThumbnail::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 70%;
      background: linear-gradient(to bottom, transparent, #cccccc, transparent);
      z-index: 1;
    }

    .placeholderText {
      position: relative;
      z-index: 2;
    }

    /* 热度指示器 */
    .heatBadge {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 500;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .heatBadge .icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 2px;
    }

    /* 视频时长 */
    .duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      z-index: 10;
    }

    /* 视频卡片信息区 */
    .videoInfo {
      padding: 10px 8px;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }

    .videoTitle {
      font-size: 13px;
      font-weight: 500;
      color: #333333;
      line-height: 1.4;
      word-break: break-word;
    }

    .videoMeta {
      font-size: 11px;
      color: #999999;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .videoLocation {
      font-size: 11px;
      color: #999999;
    }


    /* ===== 空状态 ===== */
    .emptyState {
      text-align: center;
      padding: 60px 20px;
    }

    .emptyIcon {
      width: 80px;
      height: 80px;
      border: 2px solid #d0d0d0;
      border-radius: 8px;
      background-color: #fafafa;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #999999;
      margin-bottom: 16px;
    }

    .emptyText {
      font-size: 14px;
      color: #999999;
    }

    /* ===== 加载更多提示 ===== */
    .loadMore {
      text-align: center;
      padding: 20px 16px;
      color: #999999;
      font-size: 13px;
    }

    /* ===== 响应式调整 ===== */
    @media (max-width: 375px) {
      .videoCard {
        padding: 10px 12px;
        gap: 10px;
      }

      .videoTitle {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="topNavBar">
      <div class="navLeft">
        <button class="backButton">‹</button>
      </div>
      <div class="navCenter">
        <div class="pageTitle">我的视频</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <section class="searchSection">
      <div class="searchBox">
        <input type="text" class="searchInput" placeholder="搜索视频">
      </div>
      <button class="searchBtn">搜索</button>
    </section>

    <!-- 筛选栏 -->
    <section class="filterSection">
      <div class="filterItem">
        <span class="filterText">运动类型</span>
        <span class="filterArrow">▽</span>
      </div>
      <div class="filterItem">
        <span class="filterText">视频类型</span>
        <span class="filterArrow">▽</span>
      </div>
      <div class="filterItem">
        <span class="filterText">球馆</span>
        <span class="filterArrow">▽</span>
      </div>
    </section>

    <!-- 视频网格 -->
    <section class="videoGrid">
      <!-- 视频卡片 1 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            2847
          </div>
          <div class="duration">2:45</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">周六晚间足球友谊赛</div>
          <div class="videoMeta">
            <span class="videoLocation">鲲锐九人制球场</span>
          </div>
        </div>
      </div>

      <!-- 视频卡片 2 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            1520
          </div>
          <div class="duration">1:32</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">进球集锦</div>
          <div class="videoMeta">
            <span class="videoLocation">奥体1号场馆</span>
          </div>
        </div>
      </div>

      <!-- 视频卡片 3 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            3156
          </div>
          <div class="duration">3:18</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">篮球联赛全场</div>
          <div class="videoMeta">
            <span class="videoLocation">城市体育馆</span>
          </div>
        </div>
      </div>

      <!-- 视频卡片 4 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            892
          </div>
          <div class="duration">2:10</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">精彩瞬间回顾</div>
          <div class="videoMeta">
            <span class="videoLocation">城市主场2号场地</span>
          </div>
        </div>
      </div>

      <!-- 视频卡片 5 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            2310
          </div>
          <div class="duration">4:05</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">周末友谊赛回放</div>
          <div class="videoMeta">
            <span class="videoLocation">体育中心1号场</span>
          </div>
        </div>
      </div>

      <!-- 视频卡片 6 -->
      <div class="videoCard">
        <div class="videoThumbnail">
          <span class="placeholderText">视频缩略图</span>
          <div class="heatBadge">
            <span class="icon"></span>
            1673
          </div>
          <div class="duration">2:55</div>
        </div>
        <div class="videoInfo">
          <div class="videoTitle">技术亮点集锦</div>
          <div class="videoMeta">
            <span class="videoLocation">国际体育馆3号场</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 加载更多提示 -->
    <div class="loadMore">
      <div>已经刷到底了哦</div>
    </div>
  </div>

  <script>
    // 返回按钮
    const backButton = document.querySelector('.backButton');
    backButton.addEventListener('click', function() {
      window.location.href = '我的页面原型.html';
    });

    // 搜索按钮
    const searchInput = document.querySelector('.searchInput');
    const searchBtn = document.querySelector('.searchBtn');
    searchBtn.addEventListener('click', function() {
      const keyword = searchInput.value.trim();
      if (keyword) {
        alert(`搜索: ${keyword}`);
      }
    });

    // 筛选项点击
    const filterItems = document.querySelectorAll('.filterItem');
    filterItems.forEach((item) => {
      item.addEventListener('click', function() {
        const filterText = this.querySelector('.filterText').textContent;
        alert(`点击筛选: ${filterText}`);
      });
    });

    // 视频卡片点击
    const videoCards = document.querySelectorAll('.videoCard');
    videoCards.forEach(card => {
      card.addEventListener('click', function() {
        const title = this.querySelector('.videoTitle').textContent;
        alert(`跳转到: ${title} 详情页`);
      });
    });
  </script>
</body>
</html>
